<template>
  <div>
    <div class="q1" :style="{ width: $store.getters.getwidth }">
      <div v-for="(key, index) in imges" :key="index">
        <div v-if="index == 1" class="q3"><img :src="key" alt="" /></div>
        <div v-else class="q2"><img :src="key" alt="" /></div>
      </div>
    </div>
    <div class="q4" :style="{ width: $store.getters.getwidth }">
      <div class="q5">
        <span class="q6">Hot</span>
        <span>Fantasy</span>
        <span>New</span>
        <span>Free</span>
      </div>
      <div class="q7"></div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },
  props: ["imges"],
  created() {},
};
</script>

<style lang="scss" scoped>
* {
  font-size: 0.6rem;
  padding: 0;
  margin: 0;
}

.q1 {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.q3 img {
  width: 160px;
  height: 40px;
}

.q2 img {
  width: 100px;
  height: 90px;
}
.q4 {
  width: 100%;
  height: 80px;
  /* background-color: aqua; */
  border-top: 1px solid #fbfbfb;
  box-shadow: 0px 4px 4px 2px #eeeeee;
  position: relative;
}
.q5 {
  width: 300px;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  font-size: 20px;
}
.q6 {
  color: #6b4cff;
}
.q7 {
  width: 26px;
  height: 5px;
  background-color: #6b4cff;
  border-radius: 5px;
  position: absolute;
  bottom: 10px;
  left: 25px;
}
</style>